<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 150px;
            background: yellowgreen;
        }

        button {
            width: 50px;
            height: 25px;
        }

        .box1 {
            width: 300px;
            height: 150px;
            margin: 10px 0px;
            background: hotpink;
        }
    </style>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">
        <!-- 组件在使用的时候是以标签的形式存在的 -->
        <!-- 第三步：使用 -->
        <Count v-for="(item,index) in 3" :key="index"></Count>
        <Big></Big>
    </div>
</body>

</html>
<script>

    //Vue组件使用分为三步骤:
    //第一步:定义
    //第二步:注册
    //第三步:使用

    //定义一个组件:利用的是Vue.extend方法去定义组件
    //extend方法里面也需要传递配置对象,extend配置对象与Vue配置对象几乎一模一样！！！
    //      第一步：定义
    let Count = Vue.extend({
        data() {
            return { count: 1 }
        },
        methods: {
            minus() {
                this.count -= 1
            },
            add() {
                this.count += 1
            }
        },
        template: `
        <div class="box">
            <button @click="minus">-</button>
            <span>{{count}}</span>
            <button @click="add">+</button>
        </div>
        `
    })

    let Big = Vue.extend({
        data() {
            return { f: 16 }
        },
        template: ` 
        <div class="box1">
            <p :style="{fontSize:f+'px'}" @click="f++">路是脚踏出来的，历史是人写出来的</p>
        </div>`
    })

    //组件:作为Count子组件

    //关联VM
    const VM = new Vue({
        el: '#app',
        data: {
            f: 16
        },

        // 第二步：注册
        components: {
            Count,
            Big
        }
    });


    //总结:第一,组件的使用分为三步。
    //第一步:定义，需要通过Vue.extend方法进行定义。[extend里面配置项与Vue配置项几乎一模一样]
    //不能书写el、组件的响应式数据务必比是函数写法


    //第二步:注册。某一个地方需要组件，进行注册。在components配置项进行注册


    //第三步:使用。【是以自定义标签的形式使用，首字母一般大写】

</script>